<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>使用promise完成多次ajax请求</title>
    <script src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

      //先请求到monster.json
      /*
        1.创建promise对象
        2.传入一个箭头函数(resolve, reject) => {
          }
        3.(resolve, reject)参数列表
          如果请求成功，调用resolve函数
          如果请求失败，调用reject函数
        4.函数体仍然是使用jquery发出ajax请求
        5.可以实现promise链式调用
       */
      let p = new Promise((resolve, reject) => {
        //发出ajax请求
        $.ajax({
          url:"data/monster.json",
          success(resultData){  //成功的回调函数
            console.log("promise发出第一次ajax请求 monster信息=", resultData);
            resolve(resultData);
          },
          error(err){
            // console.log("promise异步请求异常=", err);
            reject(err);
          }
        })
      })

      //这里可以继续编写请求成功后的业务
      p.then((resultData) => {
        // console.log("ok");
        //这里可以继续发出请求
        // console.log("p.then 得到 resultData", resultData);
        return new Promise((resolve, reject) => {
          $.ajax({
            url:`data/monster_detail_${resultData.id}.json`,
            success(resultData){  //第二次ajax请求成功
              console.log("promise发出第二次ajax请求 monster信息=", resultData);
              //还可以继续进行下一次的请求
              resolve(resultData);
            },
            error(err){ //第二次ajax请求失败
              // console.log("promise异步请求异常=", err);
              reject(err);
            }
          })
        })
      }).then((resultData) => {
        console.log("p.then().then(), resultData", resultData);
        //还可以发出第三次ajax请求，获取该妖怪的女友信息
        return new Promise((resolve, reject) => {
          $.ajax({
            url:`data/monster_gf_${resultData.gfid}.json`,
            success(resultData){  //第二次ajax请求成功
              console.log("promise发出第三次ajax请求 monster_gf信息=", resultData);
              //还可以继续进行下一次的请求
              resolve(resultData);
            },
            error(err){ //第二次ajax请求失败
              // console.log("promise异步请求异常=", err);
              reject(err);
            }
          })
        })
      }).catch((err) => { //这里可以对多次ajax请求的异常进行处理
        console.log("promise异步请求异常=", err);
      })
    </script>
  </head>
  <body>

  </body>
</html>